<html>
<head>
  <script src="../OLLoader.js"></script>
  <script type="text/javascript">
    var box; 
    
    function test_Box_constructor (t) {
        t.plan( 7 );

        OpenLayers.Marker.Box.prototype._setBorder = 
            OpenLayers.Marker.Box.prototype.setBorder;
        OpenLayers.Marker.Box.prototype.setBorder = function (x,y) {
            g_Color = x;
            g_Width = y;
        };

        var bounds = new OpenLayers.Bounds(1,2,3,4);
        var borderColor = "blue";
        var borderWidth = 55;


        g_Color = g_Width = null;
        box = new OpenLayers.Marker.Box(bounds, borderColor, borderWidth);

        t.ok( box instanceof OpenLayers.Marker.Box, "new OpenLayers.Marker.Box returns Box object" );
        t.ok( box.bounds.equals(bounds), "bounds object correctly set");
        t.ok( box.div != null, "div created");
        //Safari 3 separates style overflow into overflow-x and overflow-y
        var prop = (OpenLayers.BROWSER_NAME == 'safari') ? 'overflowX' : 'overflow';
        t.eq( box.div.style[prop], "hidden", "div style overflow hidden");
        t.ok( box.events != null, "events object created");
        t.eq( g_Color, borderColor, "setBorder called with correct border color");        
        t.eq( g_Width, borderWidth, "setBorder called with correct border width");        
        

        OpenLayers.Marker.Box.prototype.setBorder = 
            OpenLayers.Marker.Box.prototype._setBorder;
    }


    function test_Box_setBorder(t) {
        t.plan( 2 );

        var box = {
            div: {
                style: {}
            }
        };

      //defaults
        var args = [];
        OpenLayers.Marker.Box.prototype.setBorder.apply(box, args);
        t.eq(box.div.style.border, "2px solid red", "style correctly set with no good values (defaults work)");

      //good vals
        var borderColor = "blue";
        var borderWidth = 55;

        args = [borderColor, borderWidth];
        OpenLayers.Marker.Box.prototype.setBorder.apply(box, args);
        t.eq(box.div.style.border, borderWidth + "px solid " + borderColor, "style correctly set with both good values");

    }
    function test_Box_draw(t) {
        t.plan( 5 );

        OpenLayers.Util._modifyDOMElement = 
            OpenLayers.Util.modifyDOMElement;
        OpenLayers.Util.modifyDOMElement = 
            function (element, id, px, sz) {
                g_Element = element;
                g_Id = id;
                g_Px = px;
                g_Sz = sz;
            };

        var box = {
            div: {}
        };

        
        var px = {};
        var sz = {};
        var args = [px, sz];

        g_Element = g_Id = g_Px = g_Sz = null;
        var retVal = OpenLayers.Marker.Box.prototype.draw.apply(box, args);

        t.eq(g_Element, box.div, "modifyDOMElement passes box's div for element");
        t.eq(g_Id, null, "modifyDOMElement passes null for id");
        t.eq(g_Px, px, "modifyDOMElement passes new px value for px");
        t.eq(g_Sz, sz, "modifyDOMElement passes new sz value for sz");
        t.ok(retVal == box.div, "draw returns box's div");

        OpenLayers.Util.modifyDOMElement = 
            OpenLayers.Util._modifyDOMElement;

    }

    function test_Box_onScreen(t) {
        t.plan( 2 );

        var map = new OpenLayers.Map("map");

        var url = "http://octo.metacarta.com/cgi-bin/mapserv";
        layer = new OpenLayers.Layer.WMS("WMS Layer", url);

        map.addLayer(layer);
        
        mlayer = new OpenLayers.Layer.Boxes('Test Layer');
        map.addLayer(mlayer);
               
        map.zoomToExtent(new OpenLayers.Bounds(-50,-50,50,50));

        //onscreen box
        var bounds = new OpenLayers.Bounds(-1,-1,1,1);
        var box = new OpenLayers.Marker.Box(bounds);
        mlayer.addMarker(box);
        
        t.ok( box.onScreen(), "box knows it's onscreen" );

        //offscreen box
        var bounds = new OpenLayers.Bounds(100,100,150,150);
        var box2 = new OpenLayers.Marker.Box(bounds);
        mlayer.addMarker(box2);

        t.ok( !box2.onScreen(), "box knows it's offscreen" );
        map.destroy();
    }

    function test_Box_display(t) {
        t.plan( 2 );

        var box = {
            div: {
                style: {}
            }
        };

      //display(true)
        var args = [true];
        OpenLayers.Marker.Box.prototype.display.apply(box, args);
        t.eq(box.div.style.display, "", "style.display correctly set to '' when display(true)");

      //display(false)
        var args = [false];
        OpenLayers.Marker.Box.prototype.display.apply(box, args);
        t.eq(box.div.style.display, "none", "style.display correctly set to 'none' when display(false)");
    }

    function test_Box_destroy(t) {
        t.plan(3);
        
        OpenLayers.Marker.prototype._destroy = 
            OpenLayers.Marker.prototype.destroy;
        OpenLayers.Marker.prototype.destroy = function() {
            g_Destroy = true;
        }
                
        var bounds = new OpenLayers.Bounds(1,2,3,4);
        var borderColor = "blue";
        var borderWidth = 55;

        g_Destroy = null;
        box = new OpenLayers.Marker.Box(bounds, borderColor, borderWidth);
        box.destroy();

        t.eq(box.bounds, null, "bounds nullified");
        t.eq(box.div, null, "div nullified");
        t.ok(g_Destroy == true, "OpenLayers.Marker.destroy() called");


        OpenLayers.Marker.prototype.destroy = 
            OpenLayers.Marker.prototype._destroy;
    }
    

  </script>
</head>
<body>
    <div id="map" style="width:500px;height:550px"></div>
</body>
</html>